<template>
	<view class="container">
		<div v-if="barList.length == 0" style="padding-top: 50px;">
			<cu-empty></cu-empty>
		</div>
		<view v-else>
			<view class="content-header">
				<cu-nav-bar @clickItem="clickItem" ref="navBar" :defaultActive="petActive" class="cu-nav-bar-box"
					:barList="barList"></cu-nav-bar>
				<u-icon name="plus" color="#515151" size="20" bold @click="onJumpAdd"></u-icon>
			</view>
			<view class="content-box">
				<!-- 宠物介绍 -->
				<view class="card-info">
					<view class="left">
						<image style="width: 82rpx;height: 82rpx;border-radius: 82rpx;margin-right: 16rpx;"
							class="avatar" :src="petInfo.avatar" mode=""></image>
						<view class="info-box">
							<view class="name">
								{{petInfo.name||'--'}}
								<image v-if="petInfo.sex == 1" style="width: 36rpx;height: 36rpx;margin-left: 4rpx;"
									src="@/static/mine/female.png" mode="">
								</image>
								<image v-else style="width: 36rpx;height: 36rpx;margin-left: 4rpx;"
									src="@/static/mine/male.png" mode="">
							</view>
							<view class="desc">
								{{petInfo.type_id_name||'--'}} | {{getDay}}天 |
								{{petInfo.is_steril == 0?'未绝育':'已绝育'}}
							</view>
						</view>
					</view>
					<view class="edit-box" @click="$Jump.Open('/pages/mine/pet/add?id='+petInfo.id)">
						<image style="width: 40rpx;height: 40rpx;" src="../../../static/mine/edit.png" mode=""></image>
					</view>
				</view>
				<view class="tabs-box">
					<scroll-view type="list" scroll-x>
						<view class="list-box">
							<view @click="onTabItem(index)" :class="active == index?'active':''" class="tabs-item"
								v-for="(item,index) in tabList" :key="item.id">
								{{item.name}}
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="tabs-content">
					<cu-empty :marginTop="82" v-if="listData.length == 0" tips="暂无数据"></cu-empty>
					<view class="content-list" v-else>
						<view class="his-item" v-for="(item,index) in listData" :key="index">
							<text>{{item.service_date}}</text>
							<view class="edit-box" @click="onJumpEditHis(item)">
								<image style="width: 40rpx;height: 40rpx;" src="../../../static/mine/edit.png" mode="">
								</image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-action-sheet cancelText="取消" :actions="[{
					name:'编辑',
					id:1
				},{
					name:'删除',
					id:0
				}]" :show="toolShow" @select="toolSelect" @close="toolShow =false"></u-action-sheet>
		<cu-button-wrap>
			<u-button v-if="barList.length == 0" :customStyle="{width:'670rpx',height:'104rpx',borderRadius:'104rpx'}"
				type="primary" text="添加宠物" @click="onJumpAdd"></u-button>
			<u-button v-else :customStyle="{width:'670rpx',height:'104rpx',borderRadius:'104rpx'}" type="primary"
				:text="getBtnText" @click="onJumpAddHis"></u-button>
		</cu-button-wrap>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				barList: [],
				active: 0,
				petInfo: null,
				toolShow: false,
				tabList: [{
						name: '喂食记录',
					},
					{
						name: '饮水记录'
					},
					{
						name: '疫苗记录'
					},
					{
						name: '驱虫记录'
					},
					{
						name: '铲砂记录'
					},
				],
				listData: [],
				petList: [],
				petActive: 0,
				petDay: 0,
				isAdd: false,
				selItem: null, //操作的数据
			}
		},
		computed: {
			getDay() {
				// petInfo.birthday||'--'
				if (this.petInfo && this.petInfo.birthday) {
					let day = this.$Common.calculateAgeInDays(this.petInfo.birthday);
					return day
				}
				return 0
			},
			getBtnText() {
				return ['添加喂食记录', '添加饮水记录', '添加疫苗记录', '添加驱虫记录', '添加铲砂记录'][this.active]
			}
		},
		onLoad() {
			let _this = this;
			// 新增宠物
			uni.$on('addPet', () => {
				_this.petActive = -1
				_this.petInfo = null;
				console.log('addPet', this.petInfo);
			})
		},
		onShow() {
			this.getPetList();
		},
		destroyed() {
			uni.$off('addPet')
		},
		methods: {

			// 宠物点击
			clickItem(id) {
				this.petActive = id;
				this.petList.map(item => {
					if (item.id == id) {
						this.petInfo = item;
					}
				})
				this.onTabItem(0)
			},
			// 加载宠物列表
			getPetList() {

				let _this = this;
				this.$Net.get(this.$api.pet_List, {
					page: 1,
					limit: 99
				}, 1).then(res => {
					this.barList = res.list.map(item => {
						return {
							label: item.name,
							id: item.id
						}
					})
					console.log('-222petInfo', this.petInfo);
					if (res.list && res.list.length > 0) {
						this.petList = res.list
						res.list.map(item => {
							if (item.id == this.petActive) {
								this.petInfo = item;
							}
						})
						console.log('-3333petInfo', this.petInfo);
						if (!this.petInfo) {
							this.petActive = res.list[0].id
							this.petInfo = res.list[0]
							if (this.$refs.navBar) {
								this.$refs.navBar.setActive(res.list[0].id);
							}
						}
						// this.petDay = this.$Common.calculateAgeInDays(this.petInfo.birthday);
						this.loadList();
						// 		return day
					}
					// 

				})
			},
			// 添加宠物
			onJumpAdd() {
				this.$Jump.Open('/pages/mine/pet/add')
			},
			// 添加记录
			onJumpAddHis() {
				this.$Jump.Open('/pages/mine/record/add?type=' + this.active + "&archive_id=" + this.petInfo.id)
			},
			toolSelect(e) {
				if (e.id == 0) {
					let _this = this;
					// 删除
					uni.showModal({
						title: '是否删除',
						success: async function(res) {
							if (res.confirm) {

								// user_pet_feed:"user/pet/feed", //删除喂食记录
								// user_pet_sand:"user/pet/sand", //删除铲砂记录
								// user_pet_vacc:"user/pet/vacc", //删除疫苗记录
								// user_pet_water:"user/pet/water", //删除饮水记录

								let url = [_this.$api.user_pet_feed, _this.$api.user_pet_water, _this.$api
									.user_pet_vacc, _this.$api
									.user_pet_insect,
									_this.$api.user_pet_sand
								][_this.active];
								res = await _this.$Net.delete(url + "/" + _this.selItem.id, {}, 1);
								console.log('res == >', res);
								_this.$Msg.Toast('删除成功');
								_this.loadList();
							} else {

							}
						}
					})
				} else {
					// 编辑
					uni.setStorageSync('itemCell', this.selItem)
					this.$Jump.Open('/pages/mine/record/add?type=' + this.active + "&archive_id=" + this.petInfo.id +
						"&id=" +
						this.selItem.id)
				}
				console.log(e);
			},
			// 编辑记录
			onJumpEditHis(item) {
				this.toolShow = true;
				this.selItem = item;

			},
			loadList() {
				switch (this.active) {
					case 0:
						// 喂食记录
						this.pet_list_feed();
						break;
					case 1:
						// 饮水记录
						this.pet_list_water();
						break;
					case 2:
						// 疫苗记录
						this.pet_list_vaccium();
						break;
					case 3:
						// 驱虫记录
						this.pet_list_insect();
						break;
					case 4:
						// 铲砂记录
						this.pet_list_sand();
						break;
					default:
						break;
				}
			},
			onTabItem(index) {
				this.active = index;
				this.loadList();
			},
			// 喂食记录
			pet_list_feed() {
				this.$Net.get(this.$api.pet_list_feed, {
					page: 1,
					limit: 99,
					id: this.petInfo.id
				}, 1).then(res => {
					this.listData = res.list
				})
			},
			// 饮水记录
			pet_list_water() {
				this.$Net.get(this.$api.pet_list_water, {
					page: 1,
					limit: 99,
					id: this.petInfo.id
				}, 1).then(res => {
					this.listData = res.list
				})
			},
			// 疫苗记录
			pet_list_vaccium() {
				this.$Net.get(this.$api.pet_list_vaccium, {
					page: 1,
					limit: 99,
					id: this.petInfo.id
				}, 1).then(res => {
					this.listData = res.list
				})
			},
			// 驱虫记录
			pet_list_insect() {
				this.$Net.get(this.$api.pet_list_insect, {
					page: 1,
					limit: 99,
					id: this.petInfo.id
				}, 1).then(res => {
					this.listData = res.list
				})
			},
			// 铲砂记录
			pet_list_sand() {
				this.$Net.get(this.$api.pet_list_sand, {
					page: 1,
					limit: 99,
					id: this.petInfo.id
				}, 1).then(res => {
					this.listData = res.list
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 0 40rpx;
		background: #F5F7F8;



		.content-header {
			display: flex;
			justify-content: space-between;

			.cu-nav-bar-box {
				flex: 1;
				overflow: auto;
			}

			::v-deep .u-icon {
				width: 60rpx;
				justify-content: center;
			}
		}

		.content-box {
			.card-info {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-radius: 16px;
				background: #FFF;
				width: 100%;
				padding: 32rpx 32rpx 32rpx 28rpx;

				.left {
					display: flex;
					align-items: center;

					.info-box {
						.name {
							color: rgba(0, 0, 0, 0.80);
							font-family: "PingFang SC";
							font-size: 32rpx;
							font-weight: 400;
						}

						.desc {
							color: rgba(0, 0, 0, 0.40);
							font-family: "PingFang SC";
							font-size: 28rpx;
							font-weight: 400;
						}
					}
				}
			}

			.tabs-box {
				margin-top: 38rpx;

				.list-box {
					white-space: nowrap;

					.tabs-item {
						padding: 0 32rpx;
						height: 64rpx;
						line-height: 64rpx;
						justify-content: center;
						align-items: center;
						border-radius: 24px;
						background: #FFF;
						color: rgba(0, 0, 0, 0.60);
						text-align: center;
						font-family: "PingFang SC";
						font-size: 32rpx;
						font-weight: 400;
						margin-right: 24rpx;
						display: inline-block;
					}

					.active {
						background: #68B0FC;
						color: #fff;
					}
				}

			}

			.tabs-content {
				.content-list {
					padding-top: 40rpx;

					.his-item {
						display: flex;
						align-items: center;
						justify-content: space-between;
						color: rgba(0, 0, 0, 0.60);
						font-family: "PingFang SC";
						font-size: 32rpx;
						font-weight: 400;
						margin-bottom: 40rpx;
					}
				}
			}
		}

	}


	::v-deep .u-button__text {
		font-size: 36rpx !important;
	}

	::v-deep .content-bar {
		justify-content: left !important;

		.content-bar-item {
			margin-right: 100rpx;
		}
	}
</style>